<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>变量提升机制</title>
     <link rel='stylesheet' href='https://cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css'>
     <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
    <style>code::-webkit-scrollbar {display: none;}</style>
</head>
<body>
     <pre>
        <code style='border-radius: 10px;'>
        /** 浏览器为了能够让代码自上而下执行 首先会开辟一块内存(栈内存) ==> 作用域或执行上下文(context)
         * 1、执行代码 ==> 全局作用域
         * 2、存储变量以及基本数据类型的值
         */

        /** 当浏览器开辟出供 代码执行的栈内存后 代码并没有自上而下进行立即执行 
         * 而是继续做了一些事情 ： 把当前作用域中使用var/function关键字的进行提前声明和定义 ==> 变量提升机制
         * 带var的只是提前声明 var a；如果只声明没有赋值默认值是undefined 
         * 带function的不仅声明 而且还定义了 定义其实就是赋值 ==> 更准确说就是将变量和值进行关联
         *  */  

         console.log('提前打印的a',a); // undefined
         var a = 10
         console.log('aaaa',a); // 10
        //  console.log(c); // Uncaught ReferenceError: Cannot access 'c' before initialization
        //  let c = 0
        var b = 10
        console.log(sum(1,2)); // 3
        function sum(a,b){
            return a + b
        }

        // 带var和不带var的区别

        // console.log('提前打印----',fn(1,10));  // Uncaught ReferenceError: Cannot access 'fn' before initialization
        let fn = (a,b) => {
            return a + b
        }
        console.log('fn',fn(1,10));
        </code>
     </pre>
     <script> hljs.highlightAll(); </script>
     <script>
        /** 浏览器为了能够让代码自上而下执行 首先会开辟一块内存(栈内存) ==> 作用域或执行上下文(context)
         * 1、执行代码 ==> 全局作用域
         * 2、存储变量以及基本数据类型的值
         */

        /** 当浏览器开辟出供 代码执行的栈内存后 代码并没有自上而下进行立即执行 
         * 而是继续做了一些事情 ： 把当前作用域中使用var/function关键字的进行提前声明和定义 ==> 变量提升机制
         * 带var的只是提前声明 var a；如果只声明没有赋值默认值是undefined 
         * 带function的不仅声明 而且还定义了 定义其实就是赋值 ==> 更准确说就是将变量和值进行关联
         *  */  

         console.log('提前打印的a',a); // undefined
         var a = 10
         console.log('aaaa',a); // 10
        //  console.log(c); // Uncaught ReferenceError: Cannot access 'c' before initialization
        //  let c = 0
        var b = 10
        console.log(sum(1,2)); // 3
        function sum(a,b){
            return a + b
        }

        // 带var和不带var的区别

        // console.log('提前打印----',fn(1,10));  // Uncaught ReferenceError: Cannot access 'fn' before initialization
        let fn = (a,b) => {
            return a + b
        }
        console.log('fn',fn(1,10));
     </script>
</body>
</html>